<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a="http://richfaces.org/a4j" template="/layout/template.xhtml">

	<ui:define name="body">
		<h:form id="PersonListingForm">

			<rich:extendedDataTable
				onkeypress="if (!event) { var event = window.event; }if (event.keyCode == 13) {var targ;if (event.target) targ = event.target;else if (event.srcElement) targ = event.srcElement;if (targ.nodeType == 3) targ = targ.parentNode;if (targ) targ.blur();return false;} else return true;"
				noDataLabel="No Data" id="edtPersons" var="_person"
				value="#{EDTAction.personsDataModel}" width="700px" height="250px"
				enableContextMenu="false" selectedClass="tableSelectedRow"
				selectionMode="single" rowKeyVar="rkvar" columnClasses="column"
				selection="#{EDTAction.personSelection}" binding="#{personsTable}"
				rows="5">

				<f:facet name="header">
					<h:outputText value="Persons" id="otPersons" />
				</f:facet>

				<rich:column sortBy="#{_person.first}" filterBy="#{_person.first}"
					width="18%" id="FirstNameColumn">
					<f:facet name="header">
						<h:outputText value="First Name" id="otFirstHeader" />
					</f:facet>

					<h:outputText value="#{_person.first}" id="otFirstValue" />
				</rich:column>


				<rich:column sortBy="#{_person.last}" filterBy="#{_person.last}"
					width="18%" id="LastNameColumn">
					<f:facet name="header">
						<h:outputText value="Last Name" id="otLastHeader" />
					</f:facet>

					<h:outputText value="#{_person.last}" id="otLastValue" />
				</rich:column>

				<rich:column sortBy="#{_person.email}" filterBy="#{_person.email}"
					width="18%" id="EmailColumn">
					<f:facet name="header">
						<h:outputText value="Email" id="otEmailHeader" />
					</f:facet>

					<h:outputText value="#{_person.email}" id="otEmailValue" />
				</rich:column>

				<rich:column sortBy="#{_person.city}" filterBy="#{_person.city}"
					width="18%" id="CityColumn">
					<f:facet name="header">
						<h:outputText value="City" id="otCityHeader" />
					</f:facet>

					<h:outputText value="#{_person.city}" id="otCityValue" />
				</rich:column>

				<rich:column sortBy="#{_person.street}" filterBy="#{_person.street}"
					width="18%" id="StreetColumn">
					<f:facet name="header">
						<h:outputText value="Street" id="otStreetHeader" />
					</f:facet>

					<h:outputText value="#{_person.street}" id="otStreetValue" />
				</rich:column>

				<rich:column sortBy="#{_person.zip}" filterBy="#{_person.zip}"
					width="10%" id="ZipColumn">
					<f:facet name="header">
						<h:outputText value="Zip" id="otZipHeader" />
					</f:facet>

					<h:outputText value="#{_person.zip}" id="otZipValue" />
				</rich:column>


				<a:support action="#{EDTAction.selectPerson()}" event="onclick"
					reRender="edtPersons" ajaxSingle="true">
				</a:support>
				<f:facet name="footer">
					<rich:datascroller id="dsPersons" />
				</f:facet>
			</rich:extendedDataTable>
		</h:form>
	</ui:define>
</ui:composition>